import { ProCard, ProColumns, ProForm, ProFormRadio, ProFormText, ProTable } from "@ant-design/pro-components"
import { Col, Row, Tabs, TabsProps, Tree } from "antd";

const App:React.FC=()=>{

     interface DataType{
            code?:string,name?:string,type?:string,status?:string
         };
    
         const columns:ProColumns<DataType>[]=[
            {dataIndex:'code',title:'编码'},{dataIndex:'name',title:'名称'},
            {dataIndex:'type',title:'类型'},{dataIndex:'status',title:'状态'},
         ];
    
         const tdata:DataType[]=[
            {code:'A001',name:'XX加工中心保养-A',type:'设备保养',status:'正常'},
            {code:'A002',name:'XX加工中心保养-B',type:'设备保养',status:'正常'},
            {code:'A003',name:'XX加工中心保养-C',type:'设备保养',status:'正常'},
            {code:'B001',name:'XX夹具校准-A',type:'设备维修',status:'正常'},
            {code:'B002',name:'XX夹具校准-B',type:'设备维修',status:'正常'},
            {code:'B003',name:'XX夹具校准-C',type:'设备维修',status:'正常'},
            {code:'C001',name:'XX维修辊轴-A',type:'备品备件',status:'正常'},
            {code:'C002',name:'XX维修辊轴-B',type:'备品备件',status:'正常'},
            {code:'C003',name:'XX维修辊轴-C',type:'备品备件',status:'正常'},
         ];

         interface DataType2{
            code?:string,name?:string,invstd?:string,munit_name?:string,quantity?:number,type?:string,
         };
    
         const columns2:ProColumns<DataType>[]=[
            {dataIndex:'code',title:'编码'},{dataIndex:'name',title:'名称'},
            {dataIndex:'invstd',title:'规格'},{dataIndex:'munit_name',title:'单位'},
            {dataIndex:'quantity',title:'标准用量'},{dataIndex:'type',title:'使用方法'},
         ];
    
         const tdata2:DataType2[]=[
            {code:'KDD001',name:'XX齿轮',type:'损耗',invstd:'20*525*800',munit_name:'只',quantity:1},
            {code:'KDD002',name:'润滑油',type:'损耗',invstd:'PCH25',munit_name:'公斤',quantity:0.8},
            {code:'KDD003',name:'YY工具',type:'借用',invstd:'',munit_name:'套',quantity:1},
           
         ];

      const treeNode=[
        {
            key:'0',
            title:'维保类型',
            children:[
                {
                    key:'01',
                    title:'保养类型',
                    children:[
                        {key:'0101',title:'周期保养'},
                        {key:'0102',title:'特种设备保养'},
                        {key:'0103',title:'点检保养'},
                        {key:'0104',title:'其他保养'},
                    ],
                },
                {
                    key:'02',
                    title:'维修类型',
                    children:[
                        {key:'0201',title:'机械维修'},
                        {key:'0202',title:'电气维修'},
                        {key:'0202',title:'综合维修'},
                    ],
                },
            ]
        },
      ];

    const tabsItem:TabsProps['items']=[
      {
         key:'1',
         label:'维保项目',
         children:<>
         <Row gutter={8}>
            <Col span={6}>
                <ProCard bordered style={{height:600}}>
                 <Tree treeData={treeNode} defaultExpandAll/>
                 </ProCard>
            </Col>
            <Col span={18}>
            
               <Row gutter={8}>
                  <Col span={10}>
                  <ProCard bordered  style={{height:600}} title='维保项目'>
                     <ProTable<DataType>
                        search={false}
                        options={false}
                        columns={columns}
                        dataSource={tdata}
                        />
                    </ProCard>
                  </Col>
                  <Col span={14}>
                  <ProCard bordered  style={{height:600}} title='备品备件表'>
                     <ProTable<DataType2>
                        search={false}
                        options={false}
                        columns={columns2}
                        dataSource={tdata2}
                        />
                    </ProCard>
                  </Col>

               </Row>
                   
                
            </Col>
        </Row>
         </>,
      },
      {
         key:'2',
         label:'维保方案',
         children:<>
            即维保项目的组合，可以按设备进行引用。
         </>,
      }
    ]; 
    return <>
       <ProCard title='维保项目和方案' style={{height:700}} 
       >
        <Tabs items={tabsItem} type="card"/>
         

       </ProCard>
    </>;
};

export default App;